{template 'member', 'header'}
<div id="memberArea">
	{template 'member', 'account_manage_left'}
	<div class="col-auto">
		<div class="col-1 ">
			<h5 class="title">{L('modify').L('avatar')}</h5>
			<div class="content">
				<ul class="col-right col-avatar" id="avatarlist">
				  {loop $avatar $k $v}
					<li>
						<div class="previewImg w{$k}">
							<img class="J_avatarPreview" src="{$v}" onerror="this.src='{$phpsso_api_url}/statics/images/member/nophoto.gif'">
						</div>
						{L('avatar')}{$k} x {$k}
					</li>
				  {/loop}
				</ul>
				<div class="col-auto">
					<script language="javascript" type="text/javascript" src="{$phpsso_api_url}/statics/js/swfobject.js"></script>
					<link href="{JS_PATH}cropper/ImgCropping.css" rel="stylesheet">
					<link href="{JS_PATH}cropper/cropper.min.css" rel="stylesheet">
					<script src="{JS_PATH}cropper/cropper.min.js"></script>
					<style type="text/css">
						.col-avatar li{margin-bottom:10px}.previewImg img{width:100%;height:100%}.previewImg.w180{width:180px;height:180px}.previewImg.w90{width:90px;height:90px}.previewImg.w45{width:45px;height:45px}.previewImg.w30{width:30px;height:30px}.col-avatar li img{border:0}.avatar-wrap{width:590px;min-height:470px;border:1px solid #c4d5df;position:relative;background:#f7fafb;padding-bottom:10px;overflow:hidden}.avatar-wrap a.avatar-selecter{position:absolute;display:block;width:180px;height:52px;background:url({$phpsso_api_url}/statics/images/btn-avatar-1.png) no-repeat;background-size:180px auto;top:200px;left:209px}.avatar-wrap a.avatar-selecter:hover{background-image:url({$phpsso_api_url}/statics/images/btn-avatar-3.png)}.avatar-wrap a.avatar-selecter span{background:url({$phpsso_api_url}/statics/images/btn-avatar-2.png) no-repeat;background-size:150px auto;display:block;width:180px;height:50px;background-position:11px 10px}.avatar-wrap .avatar-cropper{display:none}.avatar-wrap .avatar-cropper .cropper-tips{font-size:14px;font-weight:700;color:#000;padding-left:12px}.avatar-wrap .avatar-cropper #canvas{width:590px;height:350px;overflow:hidden;border:none}.avatar-wrap .avatar-cropper .cropper-controls{padding:10px}.avatar-wrap .avatar-cropper .cropper-controls a{display:inline-block;border:1px solid #9e9e9e;background:#f5f5f5;border-radius:6px;padding:6px 19px;color:#212121;margin:0 5px;text-decoration:none;font-size:14px}.avatar-wrap .avatar-cropper .cropper-controls a:hover{border-color:#000}.avatar-wrap .avatar-cropper .cropper-controls a.btn-save{float:right;background:#3a72ab;color:#fff;border-color:#01376c}
					</style>
					<div id="myContent"> 
						<div class="avatar-wrap" style="display:none">
							<a href="javascript:void(0)" class="avatar-selecter J_select"><span></span></a>
							<div class="avatar-cropper">
								<input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="file" style="display:none">
								<img id="canvas"/>
								<div class="cropper-tips">您可以拖动中间的方框以裁剪满意的头像</div>
								<div class="cropper-controls">
									<a href="javascript:void(0)" class="J_rotateLeft lf">向左旋转</a>
									<a href="javascript:void(0)" class="J_rotateRight lf">向右旋转</a>
									<a href="javascript:void(0)" class="btn-save rt J_save">保存图片</a>
									<a href="javascript:void(0)" class="J_reSelect rt">重新选择</a>
								</div>
							</div>
						</div>
					</div>
					<script type="text/javascript">
						var flashvars = {
							'upurl': "{$upurl}&callback=return_avatar&"
						};
						var params = {
							'align': 'middle',
							'play': 'true',
							'loop': 'false',
							'scale': 'showall',
							'wmode': 'window',
							'devicefont': 'true',
							'id': 'Main',
							'bgcolor': '#ffffff',
							'name': 'Main',
							'allowscriptaccess': 'always'
						};
						var isIE = navigator.userAgent.indexOf("compatible") > -1 && navigator.userAgent.indexOf("MSIE") > -1;
						var attributes = {};

						//实现toBlob
						if (!HTMLCanvasElement.prototype.toBlob) {
							Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
								value: function(callback, type, quality) {
									var canvas = this;
									setTimeout(function() {
										var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
										var len = binStr.length;
										var arr = new Uint8Array(len);
										for (var i = 0; i < len; i++) {
											arr[i] = binStr.charCodeAt(i);
										}
										callback(new Blob([arr], {
											type: type || 'image/jpeg'
										}));
									});
								}
							});
						}

						//保存回调
						function return_avatar(data) {
							if (data == 1) {
								window.location.reload();
							} else {
								alert('保存失败');
							}
						}
						//检测placeholder得知是否为ie10+
						function is_support_placeholder() {
							var input = document.createElement('input');
							return 'placeholder' in input;
						};
						$(function() {
							if (isIE && !is_support_placeholder()) {
								swfobject.embedSWF("{$phpsso_api_url}/statics/images/main.swf", "myContent", "490", "434", "9.0.0", "{$phpsso_api_url}/statics/images/expressInstall.swf", flashvars, params, attributes);
							} else {
								$('.avatar-wrap').show();
								//选择图片
								$('.J_select, .J_reSelect').on('click', function() {
									$('#file').click()
								})
								//左旋转
								$('.J_rotateLeft').on('click', function() {
									$('#canvas').cropper("rotate", 45);
								})
								//右旋转
								$('.J_rotateRight').on('click', function() {
									$('#canvas').cropper("rotate", -45);
								})
								//保存
								$('.J_save').on('click', function() {
									if ($("#canvas").attr("src") == null) {
										return false;
									} else {
										var cas = $('#canvas').cropper('getCroppedCanvas', {
											width: 180,
											height: 180,
											imageSmoothingQuality: 'high'
										});
										cas.toBlob(function(img) {
											var oReq = new XMLHttpRequest();
											oReq.open("POST", '{base64_decode($upurl)}', true);
											oReq.onload = function(oEvent) {
												return_avatar(oReq.response)
											};
											oReq.send(img);
										}, "image/jpeg");
									}
								})
								//load
								$('#file').on('change', function() {
									if (!this.files || !this.files[0]) {
										return;
									}
									$('.J_select').is(':visible') && $('.J_select, .avatar-cropper').toggle();
									var reader = new FileReader();
									reader.onload = function(evt) {
										var replaceSrc = evt.target.result;
										$('#canvas').cropper('replace', replaceSrc, false);
									}
									reader.readAsDataURL(this.files[0]);
								})
								//cropper init
								$('#canvas').cropper({
									viewMode: 1,
									aspectRatio: 1,
									preview: '.previewImg',
									guides: true,
									autoCropArea: 0.5,
									movable: false,
									dragCrop: false,
									dragMode: 'move',
									movable: true,
									resizable: false,
									zoomable: true,
									mouseWheelZoom: false,
									touchDragZoom: true,
									rotatable: true,
									cropBoxResizable: false,
									minCanvasWidth: 180,
									minCanvasHeight: 180,
									crop: function(e) {

									}
								});
							}
						})
					</script>
				</div>
			</div>
			<span class="o1"></span><span class="o2"></span><span class="o3"></span><span class="o4"></span>
		</div>
	</div>
</div>
<div class="clear"></div>
{template 'member', 'footer'}